<template>
  <div class="topBar_wraper">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="logo">
          <img src="../assets/vue.svg" alt="logo">
          <span>瞬言时刻</span>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="btn">
          <el-button type="primary" round @click="upWall(0)">留言墙</el-button>
          <el-button round @click="upWall(1)">照片墙</el-button>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="goto">
          <span>登录</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useMainStore } from '../store/index'

const store = useMainStore()

const upWall = (id: number) => {
  store.upTitle(id)
}

</script>

<style lang="scss" scoped>
$top_height: 50px;

.topBar_wraper {
  box-sizing: border-box;
  width: 100%;
  height: $top_height;
  background-color: white;
  margin-bottom: 10px;
  padding: 10px 0 10px 20px;
  box-shadow: 0 5px 3px rgba($color: #b4b4b4, $alpha: .5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .logo {
    position: relative;

    img {
      position: absolute;
      height: calc($top_height - 10px);
      top: calc((10px - $top_height )/5);
    }

    span {
      font-size: 20px;
      font-family: '楷体';
      font-weight: bold;
      position: absolute;
      top: calc($top_height/8);
      left: 46px;
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    position: relative;
    bottom: calc(($top_height - ($top_height - 10px))/2);

    .el-button {
      height: calc($top_height - 10px);
      width: 100px;
    }
  }

  .goto {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: orange;

    span {
      font-size: 12px;
      font-family: '楷体';
      margin-left: 3px;
      line-height: 30px;
      cursor: pointer;
    }
  }
}
</style>